
<template>
	<div id="cash" class="clearfix nocopy">
		<div id="cash_left">
			<div class="good_code_box">
				<div class="code_box_left" ><span class="fa fa-th"></span></div>
				<input type="text" id="good_query" placeholder="输入商品" class="layui-input">
				<div class="code_box_right" >
					<u-icon name="search"></u-icon>
				</div>
			</div>
			<div id="goods_order_list">

				<table class="layui-table" lay-skin="line">
					<thead>
						<tr>
							<th class="name">商品名称</th>
							<th class="price">价格</th>
							<th class="discount">优惠</th>
							<th class="num">数量</th>
						</tr>
					</thead>
					<tbody id="order_list">
						<tr class="active">
							<td class="name">
								<div class="title">进口资生堂可悠然美肌沐浴露沐浴乳恬静清香550ml*3量贩</div>
								<div class="spec">家庭装</div>
							</td>
							<td class="price">168</td>
							<td class="discount">0</td>
							<td class="num">10</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div id="cash_left_bottom">
				<div class="orderinfo">
					<ul>
						<li id="cash_user_info">
							<span class="lname">会员</span>
							<span class="useraccount">
								<span class="phone"></span>
								<span class="layui-badge layui-bg-blue level">散客</span>
							</span>
							<span class="rnum"></span>
						</li>
						<li id="cash_user_info" >
							<span class="lname">当前餐桌</span>
							<!-- <span class="useraccount">
								<span class="phone"></span>
								<span class="layui-badge layui-bg-blue level"></span>
							</span> -->
							<span v-if="currentTableName"  class="rnum">{{currentTableName}}</span>
							<span v-else class="rnum">请先选择餐桌</span>
						</li>
						<li>
							<span class="lname">商品总数</span>
							<span class="rnum number">19</span>
						</li>
						<li>
							<span class="lname">商品总价</span>
							<span class="rnum price total">2125.00</span>
						</li>
						<li>
							<span class="lname">会员优惠</span>
							<span class="rnum price discount">0.00</span>
						</li>
						<!-- <li>
							<span class="lname">核销金额</span>
							<span class="rnum price check">0.00</span>
						</li> -->
						<li>
							<span class="sj">实际应收</span>
							<span class="sj rnum price actual">2125.00</span>
						</li>
					</ul>
				</div>
				<div class="layui-btn-group">
					<button class="layui-btn layui-btn-danger" >选择会员</button>
					<button class="layui-btn layui-btn-danger" >结账</button>
				</div>
			</div>


		</div>

		<div id="cash_con">

			<div id="cash_navbox">
				<ul>
					<li class="layui-bg-green" @click="handleKeyup({key:'f'})">餐桌列表 f</li>
					<li class="layui-bg-blue" @click="handleKeyup({key:'s'})" style="">商品列表 s</li>
					<li class="layui-bg-orange" >
						<u-icon name="plus"></u-icon>
					</li>
					<li class="layui-bg-red" >
						<u-icon name="minus"></u-icon>
					</li>
					<li @click="$refs.num.show()">数量 n</li>
					<li >删除 d</li>
					<!-- <li >挂单 g</li>
					<li >取单 q</li> -->
					<li >会员 u</li>
					<!-- <li >办卡 c</li>
					<li >扫码 m</li> -->
					<!-- <li >清空 k</li> -->
				</ul>
			</div>

			<div id="cash_conbox">

				<!-- 服务 -->
				<div data-good-type="2" style="display: block;">
					<!-- cate -->
					<div id="serve_cate" style="touch-action: pan-y pinch-zoom;">
						<div class="cate"
							style="width: 480px; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
							<ul class="clearfix">
								<!-- 餐桌分类 -->
								<template v-if="currentHandle=='number'">
									<li :class="{active:currentNumberId==i.id}" v-for="(i, k) in numberList" :key="k" @click="numberClick(i)">
										{{i.table_name}}</li>
								</template>
								<!-- 商品分类 -->
								<template v-else>
									<li :class="{active:currentCategoryId==i.id}" v-for="(i, k) in category" :key="k" @click="categoryClick(i)">
										{{i.name}}</li>
								</template>
							</ul>
						</div>
					</div>
					<div class="goods_box">
						<!-- 餐桌列表 -->
						<template v-if="currentHandle=='number'">
							<div class="xc-flex xc-flex-wrap">
								<div class="item info xc-margin-b-10 xc-flex xc-flex-column justify-center align-center " v-rightMenu="rightMenuObj"
									@click="numberClick(i)" :class="{
									error:i.status==1
								}" v-for="(i, k) in numberList" :key="k">
									<span class="title"><span>{{i.table_name}}</span></span>
									<span class="subtitle"><span>{{i.max_num}}人桌</span></span>
								</div>
							</div>
						</template>
						<!-- 商品列表 -->

						<template v-else>
							<div class="col-sm-4 col-md-3 col-lg-2 goods_item" style="display: block;" v-for="(i, k) in goodList" :key="k">
								<div class="g_item_box">
									<div class="good_img">
										<el-tooltip :content="i.intro">
											<img :src="i.photo" :alt="i.intro">
										</el-tooltip>
									</div>
									<div class="good_info">
										<div class="good_title">{{i.title}}</div>
										<div class="good_spec"></div>
										<div class="good_price">
											{{i.price}} </div>
									</div>
								</div>
							</div>
						</template>
					</div>
				</div>
				<!-- 服务end -->
			</div>
		</div>

		<!-- 编辑数量 -->
		<dialogWrap title="请输入数量" ref="num" dialogWidth="340px" :showButton="false">
			<numberEditVue />
		</dialogWrap>
	</div>
</template>

<script>
import numberEditVue from './dialog/numberEdit.vue';
	export default {
		components:{numberEditVue},
		data() {
			return {
				meta: {
					title: "收银台"
				},
				category: [], //商品分类
				currentCategoryId: 0,
				goodList: [],
				currentHandle: 'number', // 餐桌，商品good
				currentTableName:'',
				numberList: [],
				rightMenuObj: {
					text: [
						"开桌",
						"换台",
						// "",
						// "在联系人中查看",
						// "在单聊窗口中打开",
						// "会话置顶"
					],
					handler: {
						checkingData(vm) {
							console.log('	checkingData(vm) {: ', vm);
						},
						copyId() {
							console.log("复制用户id点击事件");
						},
						removeItem() {
							console.log("移除会话点击事件");
						},
						showContact() {
							console.log("在联系人中查看");
						},
						showSingleChat() {
							console.log("在单聊窗口中打开");
						},
						topConversation() {
							console.log("会话置顶");
						}
					}
				},
				currentNumberId: 0,
			}
		},
		provide() {
			return {
				vm: this
			}
		},
		beforeMount() {
			window.addEventListener('keyup', this.handleKeyup)
		},
		beforeDestroy() {
			window.removeEventListener('keyup', this.handleKeyup)
		},
		mounted() {
			this.init();
			this.getGoodList();
		},
		methods: {
			// 点击餐桌
			numberClick(e) {
				console.log('e: ', e);
				this.currentNumberId = e.number_id;
				this.currentTableName = e.table_name;
			},
			// 点击分类
			categoryClick(e) {
				console.log('categoryClick(e): ', e);
				this.currentCategoryId = e.id;
			},
			getGoodList() {
				var jsons = {

				};
				this.$api.goods_index(jsons).then(data => {
					console.log('data: ', data);
					this.goodList = data.list;
				});
			},
			init() {
				// 获取商品分类
				this.$api.goodstype_index({
					page_size: 100
				}).then(data => {
					this.category = data.list;
					this.category.unshift({
						name: '全部',
						id: 0
					});
				});
				// 获取餐桌列表
				this.getNumber();
			},
			getNumber() {
				var jsons = {

				};
				this.$api.Tablenumber_index(jsons).then(data => {
					this.numberList = data.list;
				});
			},
			handleKeyup(e) {
				var key = e.key;
				switch (key) {
					case 'f':
						this.currentHandle = 'number';
						break;
					case 's':
						this.currentHandle = 'good';
						break;
					case 78:
						break;
					case 68:
						break;
					case 71:
						break;
					case 81:
						break;
					case 85:
						break;
					case 67:
						break;
					case 74:
						break; //交易
					case 77:
						break; //扫码
					case 75:
						break; //清空
					case 13:
						break; //回车
				}

			}
		},
	}
</script>
<style lang="scss" scoped>
	@import './checkstand.scss';
</style>